<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>元素关系</title>
        <style type="text/css">
            .wrapper { border: 1px solid blue ; }
            .wrapper>div { margin: 15px ; border: 1px solid pink ; padding: 15px ; }
            .wrapper .second { display: flex ; height: 100px; border-color: red; }
            .second>span { flex-basis: 20%; transition: all 1s ; text-align: center; line-height: 100px;}
            .second>span:nth-child(2n) { background: #dfdfdf ; }
            .second>span:nth-child(2n+1) { background: #ff0 ; }
            .kaifamiao { font-size: 50px; color: blue ;}
        </style>
    </head>
    <body>

        <h3>元素关系</h3>
        <p>元素(Element)是节点(Node)的子类型，因此一个Element实例也是一个Node实例</p>

        <script type="text/javascript">
            function waer(){
                let s = document.querySelector( '.second' );
                if( s ) {
                    // 获得子元素个数(不统计非元素节点)
                    let count = s.childElementCount ;
                    console.log( count );
                    if( count > 0 ) {
                        // 通过 Element.prototype.children 属性可以获得所有子元素组成的集合
                        let array = Array.from( s.children ); 
                        array.forEach( sp => {
                            sp.classList.add( 'kaifamiao' );
                        });
                    }

                    // 获取首个子元素和末尾子元素
                    console.log( 'first element: ' , s.firstElementChild );
                    console.log( 'last element: ' , s.lastElementChild );
                }
            }

            function sibling(){
                let s = document.querySelector( '.second' );
                if( s ) {
                    console.log( 'previous element: ' , s.previousElementSibling );
                    console.log( 'next element: ' , s.nextElementSibling );
                }
            }
            function attr(){
                let s = document.querySelector( '.second' );
                if( s ) {
                    // 用 Element.prototype.hasAttributes 函数判断是否拥有属性
                    if( s.hasAttributes() ){
                        // 获得所有属性组成的 NamedNodeMap
                        let attrs = s.attributes ;
                        console.log( attrs );
                        let arr = Array.from( attrs );
                        console.log( arr ); 
                        arr.forEach( a => {
                            console.log( `nodeName: ${a.nodeName} , nodeValue: ${a.nodeValue}, nodeType: ${a.nodeType}`);
                        });
                    }
                }
            }
        </script>

        <div class="wrapper">
            <div class="first even">
                <button type="button" onclick="waer()">子元素</button>
                <button type="button" onclick="sibling()">兄弟元素</button>
                <button type="button" onclick="attr()">属性</button>
            </div>
            <div class="second odd" id="two" data-name="小二">
                <span>1</span>
                <span>2</span>
                <span>3</span>
                <span>4</span>
                <span>5</span>
            </div>
            <div class="third even">
                <button type="button" onclick="parenet()">父节点</button>
                <button type="button" onclick="childs()">子节点</button>
                <button type="button" onclick="brother()">兄弟节点</button>
            </div>
        </div>

        <script type="text/javascript">
            function parenet(){
                let s = document.querySelector( '.second' );
                if( s ) {
                    // Node.prototype.parentNode 获得父节点
                    // Node.prototype.parentElement 获得父元素(即父节点)
                    console.log( s.parentNode , s.parentElement );
                    // 注意 parentElement 并不是 Element 的原型属性，而是 Node 的原型属性
                    // console.log( Node.prototype.hasOwnProperty('parentElement') ); // true
                }
            }
            function childs(){
                let s = document.querySelector( '.second' );
                if( s && s.hasChildNodes() ) {
                    let nodes = s.childNodes ;
                    let array = Array.from( nodes );
                    array.forEach( n => {
                        console.log( n.nodeName , n.nodeType );
                    });

                    console.log( 'first child: ' , s.firstChild , ' , last child: ' , s.lastChild );
                } 
            }
            function brother(){
                let s = document.querySelector( '.second' );
                if( s ) {
                    let prev = s.previousSibling ; // 前一个兄弟节点
                    let next = s.nextSibling ; // 后一个兄弟节点
                    console.log( prev , next );
                    let prevElement = prev.previousSibling ;
                    let nextElement = next.nextSibling ;
                    console.log( prevElement , nextElement );
                }
            }
        </script>
        
    </body>
</html>